本文內容

這邊來筆記一下在 Angular 中，有關元件的 life cycle 的內容。

lifecycle hooks

許多框架都有提供 lifecycle hooks 的功能給開發者做使用，當然 Angular 也不意外。 lifecycle hooks 的功能是讓開發者能透過它們在元件不同的生命週期階段，來做不同的事，比如說: 初始化... 等等。

其實不只有元件有屬於它自己的 lifecycle hooks，包含了 directive(即: *ngIf 這種) 也含有自己的 lifecycle hooks 喔。

元件的 lifecycle hooks 我們大略可以拆成兩類，一類是跟元件本身有關的，另一類是跟它的子元件有關的
元件本身有關的 lifecycle hooks
constructor()
OnInit
DoCheck
OnChanges
OnDestroy

元件子元件有關的 lifecycle hooks
AfterContentInit
AfterContentChecked
AfterViewInit
AfterViewChecked

constructor() 建構式

大家在開發的時候，應該都有注意到元件的 ts 檔案，是會包含自己的 class 的。
這代表了當 Anuglar 使用 new 搭配該元件的專屬 class 來創建該類別底下的實例，也就是這個元件實例，那在創建實例的時候，就會進到屬於它自己的建構式，也就是 constructor() 裡面囉~

OnInit()

呼叫時機: 它會在第一次 ngOnChanges() 之後，被呼叫，而且只會被呼叫一次。

Note: 在官方文件中有建議我們在這個 lifecycle hook 做初始化設定是比較安全的，例如: 首度去遠端 fetch 資料，並將取回來的資料加入到元件的屬性中。

這個 lifecycle 對應到的 lifecycle hook 是 ngOnInit，寫法如下
[TypeScript]

import { OnInit } from '@angular/core';
export class BComponent implements OnInit {
  @Input() books:string[] = []
  constructor() { }

  ngOnInit(): void {
    console.log('ngOnInit')
  }
}

constructor() 和 OnInit() 不同在哪?

它們不同在於它們所處的階段不同。
constructor() 是處在 bootstrapping 階段。而 OnInit() 是處在 change detection 階段。
boostrapping 階段就是 Angular 在創立專案中各個 service, component, directives 實例的時候。並會在這個時期將該元件有引入的相依內容傳入該元件的 constructor() 中。

那 change detection 階段，就是在 boostrapping 階段結束之後發生。
什麼是 change detection 呢? 它是一種機制， Angular 透過這種機制來檢查 元件/directive 的變化狀態，並同時將其變化內容反映到其所屬的 DOM 上。在專案檔中應該都會有一個 Zone.js 的檔案，Angular 就是利用它裡面的內容來達到 change detection 這個機制的優~~

Summary

這邊做個結論

1. 元件的 lifecycle hooks 大致可以分為兩類，一類是有關元件本身，另一類是跟它的子元件有關
2. constructor() 和 OnInit() 之間的不同，和其使用時機。

Reference

1. LifeCycle Introduce
2. Advies for ngOnInit